import React from 'react';
import { Select, Row, Col, Switch, Button } from 'antd';
import PopValue from '../PopTab/PopValue';
import { compare } from '../../utils/compare';
import { deepCopy } from 'src/utils/utils';
import './index.less';

export default function ActionItem(props) {
  const itemValue = props.value || {};

  const handleChange = (value) => {
    const current = props.options.find((item) => item.code === value);
    itemValue.code = value;
    itemValue.name = current.name;
    itemValue.parameters = deepCopy(current.parameters);
    props.onChange && props.onChange(itemValue);
  };

  // 参数设置回调
  const handleParamChange = (index, e) => {
    const param = itemValue.parameters[index];
    param.var_code = e.var_code;
    param.var_type = e.var_type;
    param.var_name = e.var_name;
    props.onChange && props.onChange(itemValue);
  };

  // 是否启用
  const changeEnabled = (value) => {
    itemValue.enabled = value;
    props.onChange && props.onChange(itemValue);
  };
  return (
    <div className='action-set'>
      <Row type='flex' justify='space-between' gutter={10} className='rule-item'>
        <Col span={2}>{props.index}</Col>
        <Col span={5}>
          <Select
            onChange={handleChange}
            value={itemValue.code}
            className='action-set-selection'
            style={{ width: '100%', ...compare(props, 'code') }}
            disabled={props.disabled}
          >
            {props.options.map((item) => {
              return (
                <Select.Option key={item.code} value={item.code} disabled={props.disabled}>
                  {item.name}
                </Select.Option>
              );
            })}
          </Select>
        </Col>
        {itemValue.parameters ? (
          itemValue.parameters.map((item, index) => {
            return (
              <Col span={5} key={item.name}>
                <PopValue
                  limitType={item.varTypeLimit}
                  variable={props.variable}
                  value={item}
                  disabled={props.disabled}
                  onChange={(value) => handleParamChange(index, value)}
                  style={compare(props, 'parameters', index)}
                />
              </Col>
            );
          })
        ) : (
          <>
            <Col span={5} />
            <Col span={5} />
          </>
        )}

        <Col span={4} style={compare(props, 'enabled')}>
          {!props.disabled ? (
            <Switch checked={itemValue.enabled === undefined ? true : itemValue.enabled} onChange={changeEnabled} />
          ) : itemValue.enabled === undefined ? (
            true
          ) : itemValue.enabled ? (
            '启用'
          ) : (
            '停用'
          )}
        </Col>
        {!props.disabled && (
          <Col span={3}>
            <Button type='link' onClick={() => props.onDel && props.onDel()}>
              删除
            </Button>
          </Col>
        )}
      </Row>
    </div>
  );
}
